<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/common.jsp"%>
<html>
<head>
    <link href="${path }/homepage/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="${path }/mui/css/mui.min.css" rel="stylesheet">
    <script src="${path }/mui//js/mui.min.js"></script>

    <style>
        .title{
            height:100px;
            line-height: 100px;
            border-top:1px solid white;
            text-align:center;
            align:center;
            font-size:22px;
        }

    </style>
    <title>机票购买系统</title>
    <script type="text/javascript">
        function tohbcx(){
            window.location.href="${path}/front/hb/index.htm";
        }

        function tohome(){
            window.location.href="${path}/tohome.htm";
        }

        function tomyorder(){
            window.location.href="${path}/front/order/toMyOrder.htm";
        }

        function tomytporder(){
            window.location.href="${path}/front/order/toMyTPOrder.htm";
        }

        function totzgg(){
            window.location.href="${path}/front/noticead/tonotice.htm";
        }
        function togrzx(){
            window.location.href="${path}/front/customer/myinfo.htm";
        }

        function pay(orderid){
            console.log("订单id = ",orderid);
            $.messager.confirm("系统提示", "确认付款？", function(r) {
                if (r) {
                    $.ajax({
                        url : '${path}/front/order/fukuan.htm',
                        data:{orderid: orderid},
                        dataType:'json',
                        type:'post',
                        success:function(result){
                            if (result.errorMsg) {
                                alert(result.errorMsg);
                            } else {
                                alert("付款成功");
                                tomyorder();
                            }
                        }
                    });
                }
            });

        }

        function cancel(orderid){
            console.log("订单id = ",orderid);
            $.messager.confirm("系统提示", "确认退款？", function(r) {
                if (r) {
                    $.ajax({
                        url : '${path}/front/order/tuipiao.htm',
                        data:{id: orderid},
                        dataType:'json',
                        type:'post',
                        success:function(result){
                            if (result.errorMsg) {
                                alert(result.errorMsg);
                            } else {
                                alert("退款成功");
                                tomyorder();
                            }
                        }
                    });
                }
            });

        }
    </script>

</head>

<body style="width:70%;margin-left:15%">

<div style="height:50px;line-height: 50px;">
    <div style="float:left;width:24%;text-align:center;color:white;background:gray;font-size:22px;" onclick="tohome()">首页</div>
    <div style="float:left;width:24%;text-align:center;color:white;background:gray;font-size:22px;" onclick="tohbcx()">航班查询</div>
    <div style="float:left;width:24%;text-align:center;color:white;background:gray;font-size:22px;" onclick="totzgg()">通知公告</div>
    <div style="float:left;width:24%;text-align:center;color:white;background:red;font-size:22px;">个人中心</div>
</div>

<div style="width:150px;height:400px;background:#fbfbfb">
    <div class="title" onclick="togrzx();return false;">个人信息</div>
    <div class="title" style="background:red">我的订单</div>
    <div class="title" onclick="tomytporder();return false;">我的退单</div>
</div>
<div style="width:750px;height:400px;float:left;margin-left:150px;margin-top:-399px">
    <form id="fm" >
        <table style="border-collapse:separate; border-spacing:30px 20px;width:100%;margin:auto;;margin-left:100px">
            <tr>
                <th>班次</th>
                <th>地点</th>
                <th>时间</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <c:forEach var="order" items="${orderList}">
                <tr>
                    <td>${order.schedular.flight.code}</td>
                    <td>${order.schedular.flight.origincity.name} —— ${order.schedular.flight.destinationcity.name}</td>
                    <td>${order.schedular.date} ${order.schedular.flight.start} —— ${order.schedular.flight.end}</td>
                    <td>￥${order.schedular.price}</td>
                    <td>
                        <c:if test="${order.status == 0}">
                            <button type="button" class="btn btn-danger" onclick='pay("${order.id}")'>付款</button>
                        </c:if>

                        <c:if test="${order.status == 1}">
                            <button type="button" class="btn btn-success" onclick="onDetail('${order.schedular.flight.origincity.name}',
                                    '${order.schedular.flight.destinationcity.name}',
                                    '${order.schedular.flight.originport.name}',
                                    '${order.schedular.flight.destinationport.name}',
                                    '${order.schedular.flight.code}',
                                    '${order.schedular.name}',
                                    '${order.schedular.date} ${order.schedular.flight.start}',
                                    '${order.schedular.date} ${order.schedular.flight.end}');return false">
                                详情</button>
                            <button type="button" class="btn btn-danger" onclick='cancel("${order.id}")'>退票</button>
                        </c:if>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </form>
</div>
<div id="detail" style="align:left;text-align:left;position:fixed;z-index:999px;top:70px;width:700px;height:650px;left:500px;background:white;display:none;overflow-y: scroll" >
    <table style="margin:auto;align:left;border-collapse: separate;border-spacing:30px 10px" >
        <tr><button style="margin-left: 620px" class="btn btn-danger" onclick='closeDetail();return false;'>关闭</button></tr><br/>
        <tr>出发城市<input disabled type="text" name="origincity" id="origincity"/></tr><br/>
        <tr>目的城市<input disabled type="text" name="destinationcity" id="destinationcity"/></tr><br/>
        <tr>出发站<input disabled type="text" name="originport" id="originport"/></tr><br/>
        <tr>目的站<input disabled type="text" name="destinationport" id="destinationport"/></tr><br/>
        <tr>航班<input disabled type="text" name="code" id="code"/></tr><br/>
        <tr>座位<input disabled type="text" name="name" id="name"/></tr><br/>
        <tr>出发时间<input disabled type="text" name="start" id="start"/></tr><br/>
        <tr>到达时间<input disabled type="text" name="end" id="end"/></tr><br/>
    </table>
</div>

<script type="text/javascript">
    function onDetail(origincity,destinationcity,originport,destinationport,code,name,start,end){
        console.log(origincity,destinationcity,originport,destinationport,code,name,start,end)
        $("#origincity").val(origincity);
        $("#destinationcity").val(destinationcity);
        $("#originport").val(originport);
        $("#destinationport").val(destinationport);
        $("#code").val(code);
        $("#name").val(name);
        $("#start").val(start);
        $("#end").val(end);
        $("#detail").show();
    }

    function onRefundTicket(){
        $("#detail").show();
    }

    function closeDetail(){
        $("#origincity").val("");
        $("#destinationcity").val("");
        $("#originport").val("");
        $("#destinationport").val("");
        $("#code").val("");
        $("#name").val("");
        $("#start").val("");
        $("#end").val("");
        $("#detail").hide();
    }

</script>

</body>
</html>


